<template>
	<view class="content">
		<view class="classification" style="padding-top: 180rpx">
			<view class="classification_item" v-for="(item ,index) in typeList" :key="item.id">
				<view class="title">
					{{item.title}}:
				</view>
			
					<scroll-view scroll-x="true" style="width: calc(100% - 60rpx);">
							<view class="typeList">
						  <view :class="items.select?'activeStyle':''" v-for="(items ,indexs) in item.list" @click="setActiveType(index,indexs)">
							{{items.title}}
						</view>
						</view>
					</scroll-view>
					
			<!-- 		<u-tabs :list="item.list" keyName="title" lineColor="rgba(0,0,0,0)" :activeStyle="activeStyle"
						:inactiveStyle="" :itemStyle="{height:'60rpx'}" @click="setClass"></u-tabs> -->
				

			</view>
		</view>
		<view class="" style="padding: 0 26upx;">
			<goodsVideoList :scrollHeight="`calc(100vh - ${domHeight}px)`" backgroundColor="#ffffff" :goodsList="goodsList"/>
		</view>
		
		
		<view class="customization" @click="goCustomization">
			<image src="/static/tqb-tabbar/find_off.png" mode=""></image>
			<view class="">
				定制
			</view>
		</view>

	</view>
</template>

<script>
	import goodsVideoList from '@/components/goodsVideoList/goodsVideoList.vue'
	export default {
		components: {
			goodsVideoList
		},
		data() {
			return {
				typeList: [],
				// {
				// 	list:{select:false}
				// }
				goodsList:[],
				domHeight:0,
				page:1,
				list: [{
					name: '无',
				}, {
					name: '极简',
				}, {
					name: '有逼格'
				}]
			}
		},

		mounted() {
			this.$myRuquest('home/index/type_list').then(res => {
				res.data.forEach(item=>{
					item.list.forEach(items=>{
						items.name=items.title
					})
				})
				this.typeList = res.data
				this.$nextTick(()=>{
					this.upTop()
				})
				this.upData()
			})
			console.log('00000000000000000')
		},

		methods: {
			upTop(){
				const query = uni.createSelectorQuery().in(this);
				query.select('.classification').boundingClientRect(data => {
					this.domHeight = data.height
				}).exec();
			},
			setActiveType(index,indexs){
				console.log(index,indexs,this.typeList[index].list[indexs])
				this.typeList[index].list[indexs].select=!this.typeList[index].list[indexs].select
				this.$forceUpdate()
				this.upData()
			},
			upData(){
				let typeId=[]
				this.typeList.forEach(item=>{
					item.list.forEach(items=>{
						if(items.select) typeId.push(items.id)
					})
				})
				console.log(typeId.join(','))
				let data={
					page:this.page,
					num:100,
					type_id:typeId.join(',') 
				}
				this.$myRuquest('home/index/activity_list',data).then(res=>{
					let list =res.data.list
					list.sort(function () {
					  return Math.random() - 0.5
					})
					this.goodsList=list
				})
			},
			goCustomization(){
				uni.navigateTo({
					url:'/pages/customization/customization'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.customization{
		position: fixed;
		right: 20upx;
		bottom:160upx;
		z-index: 1999;
		text-align: center;
		font-size: 24upx;
		border-radius: 15upx;
		background-color: rgba(0, 0, 0, .7);
		color: #fff;
		width: 90upx;
		height: 90upx;
		padding: 10upx;
		// animation: an 2s ease-out;

		image{
			width: 50upx;
			height: 50upx;
		}
	}
	@keyframes an{
		0%{
			transform: scale(.1) rotateY(-1080deg);
			right: 470upx;
			bottom: 20upx;
		}
		10%{
			bottom: 160upx;
			transform: scale(.3) rotateY(-810deg);
		}
		20%{
			bottom: 260upx;
				transform: scale(.3) rotateY(-540deg);
		}
		25%{
			bottom: 230upx;
			right: 470upx;
			transform: scale(.3) rotateY(-270deg);
		}
		40%{
			bottom: 160upx;
			right: 470upx;
			transform: scale(.5) rotateY(0deg);
		}
		// 60%{
		// 	bottom: 160upx;
		// 	right: 470upx;
		// 	transform: scale(.6) rotateY(0deg);
		// }
		100%{
					bottom: 160upx;
					right: 20upx;
					transform: scale(1);
		}
	}
	

	.content {
		background-color: #FAFAFA;
	}
.typeList{
	width: calc(100% - 60upx);
	display: flex;
	// flex-wrap: wrap;
	view{
		font-size: 24upx;
	  padding: 5upx 20upx;
		margin: 10upx;
		color: #999999;
		flex-shrink:0;
		flex-grow:0;
	}
	.activeStyle {
		background: #FEF2E2;
		border-radius: 22rpx;
		color: #AC7D3D;
		fontSize: 24rpx;
	}
}
	.classification {
		padding: 15upx 26upx;
		background-color: #FFFFFF;
		// position: fixed;
		// top: 0;
		// left: 0;
		// right: 0;
		// z-index: 999999;

		.classification_item {
			display: flex;
			// align-items: center;
			.title {
				font-size: 24upx;
				color: #999999;
				width: 60upx;
				font-weight: 700;
				line-height: 60upx;
			}

		}
	}
</style>
